<template>
  <el-popover :placement="props.direction" :width="400" :trigger="props.trigger" :persistent="false" :hide-after="0">
    <template #reference>
      <base-icon base-icon="icon-xiaolian" class="emoji" />
    </template>
    <Emotion @emotion="handleEmotion"></Emotion>
  </el-popover>
</template>

<script lang="ts" name="emoji" setup>
  import Emotion from './Index.vue'

  const props = defineProps({
    direction: {
      type: String,
      default: 'right',
    },
    trigger: {
      type: String,
      default: 'click',
    },
  })

  // 发送事件
  const emits = defineEmits(['handleEmotion'])
  const handleEmotion = (value: string) => {
    emits('handleEmotion', value)
  }
</script>
